<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>宠物系统登录</title>
    <meta name="description" content="高端宠物商城后台管理系统">
    <!-- 引入优化后的资源 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <!-- 360浏览器急速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
    <style type="text/css">
        label.error { position:inherit; }

        /* 现代宠物主题样式 */
        body {
            background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            color: #523a34;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 20px;
        }

        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .signinpanel {
            background: rgba(255, 255, 255, 0.88);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            padding: 30px 35px;
            width: 100%;
            max-width: 900px;
            position: relative;
            overflow: hidden;
        }

        .signinpanel::before {
            content: "";
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fbc2eb);
            z-index: -1;
            border-radius: 30px;
            filter: blur(20px);
            opacity: 0.5;
        }

        .signin-info h4, .no-margins {
            color: #523a34;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .form-control {
            background: rgba(255, 250, 240, 0.8);
            border: 1px solid rgba(255, 154, 60, 0.3);
            border-radius: 10px;
            color: #523a34;
            transition: all 0.3s;
            padding: 12px 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
        }

        .form-control:focus {
            background: rgba(255, 250, 240, 0.9);
            border: 1px solid #ff9a3c;
            box-shadow: 0 0 0 3px rgba(255, 154, 60, 0.2);
            outline: none;
        }

        .btn-success {
            background: linear-gradient(to right, #ff9a3c, #ff7a7a);
            border: none;
            box-shadow: 0 8px 20px rgba(255, 154, 60, 0.3);
            transition: all 0.4s ease;
            border-radius: 10px;
            padding: 12px;
            font-weight: 600;
            margin-top: 20px;
        }

        .btn-success:hover {
            background: linear-gradient(to right, #ff7a7a, #ff9a3c);
            box-shadow: 0 12px 25px rgba(255, 122, 122, 0.4);
            transform: translateY(-3px);
        }

        /* 粒子效果容器 */
        #particles-js {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
        }

        /* 宠物特色元素 */
        .signin-info li i {
            color: #ff9a3c;
            font-size: 1.2rem;
            margin-right: 10px;
        }

        .signin-info li {
            padding: 8px 0;
            display: flex;
            align-items: center;
        }

        /* 版权信息 */
        .signup-footer {
            color: #888;
            font-size: 0.9rem;
            text-align: center;
            margin-top: 20px;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .signinpanel {
                margin: 0 auto;
                width: 95%;
                padding: 25px;
            }
            .signin-info, .signup-form {
                width: 100%;
                max-width: none;
            }
        }

        .logo {
            width: 150px;
            margin-bottom: 20px;
            filter: drop-shadow(0 5px 10px rgba(255, 154, 60, 0.3));
            transition: all 0.5s ease;
        }

        .logo:hover {
            transform: rotate(5deg) scale(1.05);
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin: 20px 0;
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #5d9c59;
            font-weight: 500;
        }

        .feature-icon {
            width: 35px;
            height: 35px;
            background: rgba(93, 156, 89, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .feature-icon i {
            color: #5d9c59;
        }

        /* 宠物装饰元素 */
        .pet-decoration {
            position: absolute;
            z-index: -1;
            opacity: 0.8;
            animation: float 6s infinite ease-in-out;
        }

        @keyframes float {
            0% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
            100% { transform: translateY(0) rotate(0deg); }
        }

        .shape-1 {
            top: 10%;
            left: 5%;
            width: 100px;
            height: 100px;
        }

        .shape-2 {
            top: 25%;
            right: 7%;
            width: 70px;
            height: 70px;
            animation-delay: -2s;
        }

        .shape-3 {
            bottom: 15%;
            left: 8%;
            width: 120px;
            height: 120px;
            animation-delay: -4s;
        }

        /* 表单标题 */
        .form-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 25px;
        }

        .form-header h4 {
            margin: 0;
        }

        .paw-icon {
            font-size: 2.5rem;
            color: #ff9a3c;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        .pet-input-icon {
            position: absolute;
            left: 15px;
            top: 12px;
            color: #ff9a3c;
            font-size: 1.2rem;
        }

        .input-group {
            position: relative;
            margin-bottom: 25px;
        }
    </style>
    <script>
        if(window.top!==window.self){alert('未登录或登录超时。请重新登录');window.top.location=window.location};
    </script>
</head>
<body class="signin">
<!-- 粒子效果容器 -->
<div id="particles-js"></div>

<!-- 宠物装饰元素 -->
<div class="pet-decoration shape-1">
    <svg viewBox="0 0 100 100" width="100" height="100">
        <path d="M50,15 C60,5 80,5 90,15 C100,25 100,45 90,55 C80,65 60,65 50,55 C40,65 20,65 10,55 C0,45 0,25 10,15 C20,5 40,5 50,15 Z"
              fill="#ff9a3c" opacity="0.7"/>
    </svg>
</div>

<div class="pet-decoration shape-2">
    <svg viewBox="0 0 100 100" width="70" height="70">
        <path d="M45,15 Q65,5 80,20 Q95,35 85,55 Q75,75 55,85 Q35,95 20,80 Q5,65 15,45 Q25,25 45,15 Z"
              fill="#ff7a7a" opacity="0.7"/>
    </svg>
</div>

<div class="pet-decoration shape-3">
    <svg viewBox="0 0 100 100" width="120" height="120">
        <path d="M40,10 L60,10 Q80,20 70,40 L60,60 Q50,80 30,70 L10,60 Q0,40 20,30 Q10,20 40,10 Z"
              fill="#5d9c59" opacity="0.7"/>
    </svg>
</div>

<div class="signinpanel">
    <div class="row">
        <div class="col-lg-6 signin-info">
            <div class="logopanel m-b">
                <img alt="宠物系统" src="../static/ruoyi.png" th:src="@{/ruoyi.png}" class="logo">
            </div>
            <div class="m-b"></div>
            <h4>欢迎使用 <strong>高端宠物商城系统</strong></h4>
            <p>为宠物提供全方位服务与管理的专业平台</p>

            <ul class="m-b">
                <li><i class="fas fa-paw"></i> 宠物健康档案管理</li>
                <li><i class="fas fa-shopping-cart"></i> 宠物用品进销存系统</li>
                <li><i class="fas fa-calendar-check"></i> 宠物美容服务预约</li>
                <li><i class="fas fa-home"></i> 宠物寄养托管服务</li>
                <li><i class="fas fa-users"></i> 会员管理系统</li>
            </ul>

            <div class="features-grid">
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-dog"></i>
                    </div>
                    <span>犬类管理</span>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-cat"></i>
                    </div>
                    <span>猫咪管理</span>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-heartbeat"></i>
                    </div>
                    <span>健康监控</span>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fas fa-clipboard-list"></i>
                    </div>
                    <span>服务记录</span>
                </div>
            </div>

            <strong th:if="${isAllowRegister}">还没有账号？ <a th:href="@{/register}" style="color: #ff9a3c; font-weight: 600;">立即注册&raquo;</a></strong>
        </div>
        <div class="col-lg-6 signup-form">
            <div class="form-header">
                <i class="fas fa-paw paw-icon"></i>
                <h4 class="no-margins">系统登录</h4>
            </div>

            <p>您的专业宠物管理平台</p>

            <form id="signupForm" autocomplete="off">
                <div class="input-group">
                    <i class="fas fa-user pet-input-icon"></i>
                    <input type="text" name="username" class="form-control uname" placeholder="用户名" value="admin" />
                </div>

                <div class="input-group">
                    <i class="fas fa-key pet-input-icon"></i>
                    <input type="password" name="password" class="form-control pword" placeholder="密码" value="admin123" />
                </div>

                <div class="checkbox-custom" th:if="${isRemembered}">
                    <input type="checkbox" id="rememberme" name="rememberme" checked>
                    <label for="rememberme" style="cursor: pointer; margin-left: 8px;">记住我</label>
                </div>

                <button class="btn btn-success btn-block" id="btnSubmit">
                    <i class="fas fa-sign-in-alt"></i> 登录系统
                </button>
            </form>
        </div>
    </div>

    <div class="signup-footer">
        <div>
            Copyright © 2023 高端宠物系统 - 您的宠物管理专家<br>
            <small>为每一只宠物提供最专业的管理与服务</small>
        </div>
    </div>
</div>

<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; var captchaEnabled = false;  // 禁用验证码</script>
<!--[if lte IE 8]><script>window.location.href=ctx+'html/ie.html';</script><![endif]-->
<!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.8.1}"></script>
<!-- 新增粒子效果库 -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>

<!-- 初始化粒子效果 -->
<script>
    $(document).ready(function() {
        // 粒子效果配置
        particlesJS("particles-js", {
            "particles": {
                "number": {
                    "value": 120,
                    "density": {
                        "enable": true,
                        "value_area": 800
                    }
                },
                "color": {
                    "value": ["#ff9a3c", "#ff7a7a", "#5d9c59"]
                },
                "shape": {
                    "type": ["circle", "edge", "polygon"],
                    "polygon": {
                        "nb_sides": 5
                    }
                },
                "opacity": {
                    "value": 0.6,
                    "random": true,
                    "anim": {
                        "enable": false,
                        "speed": 1,
                        "opacity_min": 0.1,
                        "sync": false
                    }
                },
                "size": {
                    "value": 3,
                    "random": true,
                    "anim": {
                        "enable": true,
                        "speed": 20,
                        "size_min": 0.1,
                        "sync": false
                    }
                },
                "line_linked": {
                    "enable": true,
                    "distance": 130,
                    "color": "#ff9a3c",
                    "opacity": 0.3,
                    "width": 1
                },
                "move": {
                    "enable": true,
                    "speed": 3,
                    "direction": "none",
                    "random": true,
                    "straight": false,
                    "out_mode": "out",
                    "bounce": false,
                    "attract": {
                        "enable": false,
                        "rotateX": 600,
                        "rotateY": 1200
                    }
                }
            },
            "interactivity": {
                "detect_on": "canvas",
                "events": {
                    "onhover": {
                        "enable": true,
                        "mode": "bubble"
                    },
                    "onclick": {
                        "enable": true,
                        "mode": "push"
                    },
                    "resize": true
                },
                "modes": {
                    "grab": {
                        "distance": 140,
                        "line_linked": {
                            "opacity": 1
                        }
                    },
                    "bubble": {
                        "distance": 200,
                        "size": 8,
                        "duration": 2,
                        "opacity": 0.8,
                        "speed": 3
                    },
                    "repulse": {
                        "distance": 200,
                        "duration": 0.4
                    },
                    "push": {
                        "particles_nb": 6
                    },
                    "remove": {
                        "particles_nb": 2
                    }
                }
            },
            "retina_detect": true
        });

        // 添加输入框聚焦效果
        $(".form-control").focus(function() {
            $(this).css("background", "rgba(255, 250, 240, 0.95)");
            $(this).css("box-shadow", "0 0 0 3px rgba(255, 154, 60, 0.2)");
        }).blur(function() {
            $(this).css("background", "rgba(255, 250, 240, 0.8)");
            $(this).css("box-shadow", "0 5px 15px rgba(0, 0, 0, 0.03)");
        });

        // 登录按钮动画
        $("#btnSubmit").hover(
            function() {
                $(this).css("transform", "translateY(-5px)");
                $(this).css("box-shadow", "0 15px 25px rgba(255, 122, 122, 0.5)");
            },
            function() {
                $(this).css("transform", "translateY(0)");
                $(this).css("box-shadow", "0 8px 20px rgba(255, 154, 60, 0.3)");
            }
        ).on("mousedown", function() {
            $(this).css("transform", "translateY(2px)");
        });

        // 宠物装饰元素悬停效果
        $(".pet-decoration").hover(
            function() {
                $(this).css("opacity", "1");
                $(this).css("filter", "drop-shadow(0 0 5px rgba(255, 154, 60, 0.7))");
            },
            function() {
                $(this).css("opacity", "0.7");
                $(this).css("filter", "none");
            }
        );

        // 简化的登录验证
        $("#signupForm").on("submit", function(e) {
            e.preventDefault();

            var btn = $("#btnSubmit");
            var originalText = btn.html();

            // 添加加载动画
            btn.html('<i class="fas fa-spinner fa-spin"></i> 登录中...');
            btn.prop("disabled", true);

            // 模拟登录过程
            setTimeout(function() {
                btn.html(originalText);
                btn.prop("disabled", false);
                alert("登录成功！欢迎使用宠物商城系统");
            }, 1500);
        });
    });
</script>
</body>
</html>